<template>
    <div class="home-container">
        <zxjtHeader>
            <template v-slot:headerName>理财观察</template>
            <template v-slot:headerOtherIcon>
                <img @click="goMyCenter" class="header-center" src="../assets/images/zxjt/center.png">
                <img @click="sharePage" class="header-share" src="../assets/images/zxjt/share.png">
            </template>
        </zxjtHeader>
        <div class="home">
            <homeSearch></homeSearch>
            <bannerOne v-show="bannerList.length" :bannerList="bannerList"></bannerOne>
            <bannerTwo v-show="cardList.length" :cardList="cardList"></bannerTwo>
            <mainVideo :allMenu="allMenu"></mainVideo>
        </div>
    </div>
</template>

<script>
import zxjtHeader from './compoments/zxjtHeader.vue'
import homeSearch from './home/homeSearch.vue'
import bannerOne from './home/bannerOne.vue'
import bannerTwo from './home/bannerTwo.vue'
import mainVideo from './home/mainVideo.vue'
import wxApi from "../util/wxApi";
import { getRecommendData, getColumnTabs } from '../util/api'
export default {
    components: {
        zxjtHeader,
        homeSearch,
        bannerOne,
        bannerTwo,
        mainVideo
    },
    mixins: [wxApi],
    data() {
        return {
            active: 0,
            bannerList: [],
            cardList: [],
            allMenu: [],
            videoInfo:{}
        }
    },
    methods: {
        //获取banner数据
        async getBannerList() {
            const bannerParams = {
                "userId": "1776083031124",//手机号（如果未登录，给一个固定的uuid用于请求判重）
                "mode": "11",// 默认11
                "deviceId": "xiaomi-12-1",//设备号
                "isNewIn": 1,//是否首屏（首屏1 非首屏 0）
                "laneCode": "wealth-banner",//推荐位代码
                "appVer": "8.8.0",//版本号
                "appType": "android"//App类型
            }
            try {
                const dataMsg = await getRecommendData(bannerParams);
                const { code, data } = dataMsg.data
                if (code === '000000') {
                    if (data.items.length) {
                        data.items.forEach(e => {
                            this.bannerList.push({
                                bannerUrl: e.bannerUrl,
                                h5Url: e.h5Url,
                                mainId: e.mainId,//打点用的
                                videoId: e.videoId || ''
                            })
                        });
                    }
                }
            } catch (error) {
                console.log(error);
            }

        },
        //获取card数据
        async getCardList() {
            const bannerParams = {
                "userId": "1776083031124",//手机号（如果未登录，给一个固定的uuid用于请求判重）
                "mode": "11",// 默认11
                "deviceId": "xiaomi-12-1",//设备号
                "isNewIn": 1,//是否首屏（首屏1 非首屏 0）
                "laneCode": "wealth-card",//推荐位代码
                "appVer": "8.8.0",//版本号
                "appType": "android"//App类型
            }
            const dataMsg = await getRecommendData(bannerParams);
            const { code, data } = dataMsg.data
            if (code === '000000') {
                if (data.items.length) {
                    data.items.forEach(e => {
                        this.cardList.push({
                            cardUrl: e.cardUrl,
                            contentTitle: e.contentTitle,
                            h5Url: e.h5Url,
                            duration: e.hzbVideo.duration,//回放时长
                            mainId: e.mainId,//打点用的
                            videoId: e.videoId || ''
                        })
                    });
                }
            }
        },
        //获取一二级菜单
        async getMenuInfo() {
            try {
                const dataMsg = await getColumnTabs({})
                const { code, data } = dataMsg.data
                if (code === '000000') {
                    const { list } = data
                    if (list) {
                        this.allMenu = list
                    }
                }
            } catch (error) {
                console.log('error');
            }
        },
        postAppShare() {
            const { shareTitle, shareDesc } = this.$store.state.orgShareObj || {};
            const link = `${window.location.protocol}//${window.location.host}/#/${this.$channel}/zxjtHome`
            let shareTitleLive = shareTitle || title;
            let summary = shareDesc || title;
            if (window.terminal.isZxjtAndroid) {
                KDS_Native.shareLive(shareTitleLive, link, summary, "")
            } else if (window.terminal.isZxjtIos) {
                let json = {
                    "title": shareTitle,
                    "shareUrl": link,
                    "summary": summary,
                    "base64Pic": ''
                }
                window.webkit.messageHandlers.shareLive.postMessage(json)
            }
        },
        //点击分享
        wxRegCallback() {
            const { shareTitle, shareDesc, shareIcon } = this.$store.state.orgShareObj || {};
            const { name, icon } = this.$store.state.SysOrgInfo || {};
            const link =`${window.location.protocol}//${window.location.host}/#/${this.$channel}/zxjtHome`
            let opstion = {
                //link: window.location.origin + '/#' + this.$route.path,
                link,
                title: shareTitle || '【' + name + '】一起来看直播吧！', // 分享标题
                desc: shareDesc || "精彩直播，尽在" + name + "手机直播！", //分享描述
                imgUrl: shareIcon || icon,
                success: function () {
                    //alert("分享成功");
                },
                error: function (e) {
                    //alert('分享失败:'+JSON.stringify(e))
                }
            };
            this.ShareTimeline(opstion);
        },
        //点击分享
        sharePage(){
            this.postAppShare()
        },
        //点击我的中心
        goMyCenter() {
            if (this.$store.state.isYk) { //游客
                fun.ykDisposeFun();
            } else {
                //点击我的打点
                $sensorsTrack('financing_videoZoneFunctionClick', {
                    page_name: '首页',
                    function_name:'我的'
                });
                let params = {
                    path: '/zxjt/myCenter',
                    query: {
                        dzhPage: 'true'
                    }
                }
                this.$router.push(params)   
            }
        },
        //进入首页打点
        sensorsTrack() {
            setTimeout(() => {
                $sensorsTrack('financing_videoZoneHomePageView', {});
            }, 300);
        }
    },
    created() {
        this.getBannerList()
        this.getCardList()
        this.getMenuInfo()
        this.sensorsTrack()
    }
}
</script>

<style scoped lang="less">
.home-container {
    width: 100%;
}

.header-center {
    width: 36px;
    height: 36px;
    margin-right: 18px;
}

.header-share {
    width: 44px;
    height: 44px;
    margin-right: 36px;
    margin-bottom: -5px;
}

.home {
    width: calc(100% - 52px);
    height: 100%;
    margin: 0 auto;


    .empty {
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 270px;
            height: 37px;
        }
    }
}

.popup-layer {
    width: 100%;
    height: 414px;
    display: flex;
    flex-direction: column;

    .popup-icon {
        height: 263px;
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        img {
            width: 72px;
            height: 72px;
        }
    }

    .popup-cancel {
        border-top: 1px #F2F4F8 solid;
        height: 150px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #333333;
        font-size: 34px;
        font-weight: 400;
        line-height: 48px;
    }
}</style>